<template>
  <div class="dashboard-container">
    <div class="app-container">
        <!-- 卡片 -->
        <el-card>
           <el-alert
    :title="`共${total}条数据`"
    type="info"
    show-icon>
  </el-alert>
  <!-- 表格 -->
  <el-table
      :data="dailytableData"
      style="width: 100%">
      <el-table-column prop="type" label="操作类型"></el-table-column>
      <el-table-column prop="reviewer" label="操作人"></el-table-column>
      <el-table-column prop="title" label="执行结果"></el-table-column>
      <el-table-column prop="display_time" label="操作时间"></el-table-column>
      <el-table-column prop="forecast" label="描述"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.page"
      :page-sizes="[10,15,20,25]"
      :page-size="queryInfo.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
        </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>

<script>
import { daily } from '@/api/base/users'
export default {
  name: 'base-logs',
  data () {
    return {
      dailytableData: [],
      total: 0,
      queryInfo: {
        page: 1,
        limit: 10
      }
    }
  },
  created () {
    this.dailList()
  },
  methods: {
    async dailList () {
      try {
        const { data } = await daily(this.queryInfo)
        this.dailytableData = data.items
        this.total = data.total
        console.log(data)
      } catch (error) {
        this.$message.error('获取失败')
      }
    },
    // 分页
    handleSizeChange (newSize) {
      console.log(newSize)
      this.queryInfo.page = newSize
      this.dailList()
    },
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.queryInfo.limit = newPage
      this.dailList()
    }
  }
}
</script>
